<template>
    <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
    <div class='calculation-box'>
        <p>Draw a polygon using the draw tools.</p>
        <div id='calculated-area'></div>
        <button id="black-color" @click="changeColor('black')">Change to Black</button>
        <button id="red-color" @click="changeColor('red')">Change to Red</button>
        <button id="green-color" @click="changeColor('green')">Change to Green</button>
    </div>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"

export default {
    name: "UserDrawPolygon.component",
    components: {Mapbox},
    setup() {

        let mapStore = ref({});

        let draw = ref(null)
        let drawFeatureID = '';
        let newDrawFeature = false;

        const updateArea = (e) => {
            let data = draw.value.getAll();
            let answer = document.getElementById('calculated-area');
            if (data.features.length > 0) {
                let area = turf.area(data);
                // restrict to area to 2 decimal points
                let rounded_area = Math.round(area * 100) / 100;
                answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>square meters</p>';
            } else {
                answer.innerHTML = '';
                if (e.type !== 'draw.delete') alert("Use the draw tools to draw a polygon!");
            }
        }

        // callback for draw.update and draw.selectionchange
        const setDrawFeature = (e) => {
            if (e.features.length && e.features[0].type === 'Feature') {
                let feat = e.features[0];
                drawFeatureID = feat.id;
            }
        }

        //change colors
        const changeColor = (color) => {
            if (drawFeatureID !== '' && typeof draw.value === 'object') {

                // add whatever colors you want here...
                if (color === 'black') {
                    draw.value.setFeatureProperty(drawFeatureID, 'portColor', '#000');
                } else if (color === 'red') {
                    draw.value.setFeatureProperty(drawFeatureID, 'portColor', '#ff0000');
                } else if (color === 'green') {
                    draw.value.setFeatureProperty(drawFeatureID, 'portColor', '#008000');
                }

                let feat = draw.value.get(drawFeatureID);
                draw.value.add(feat)
            }
        }

        let mapOnLoadCB = (map) => {
            mapStore.value = map;

            // 使用 mapbox-gl-draw 和 Turf.js 来分别绘制多边形和计算其（以平方米为单位的）面积。
            draw.value = new MapboxDraw({
                // this is used to allow for custom properties for styling
                // it appends the word "user_" to the property
                userProperties: true,
                displayControlsDefault: false,
                controls: {
                    polygon: true,
                    trash: true
                },
                styles: [
                    // default themes provided by MB Draw
                    // default themes provided by MB Draw
                    // default themes provided by MB Draw
                    // default themes provided by MB Draw


                    {
                        'id': 'gl-draw-polygon-fill-inactive',
                        'type': 'fill',
                        'filter': ['all', ['==', 'active', 'false'],
                            ['==', '$type', 'Polygon'],
                            ['!=', 'mode', 'static']
                        ],
                        'paint': {
                            'fill-color': '#3bb2d0',
                            'fill-outline-color': '#3bb2d0',
                            'fill-opacity': 0.1
                        }
                    },
                    {
                        'id': 'gl-draw-polygon-fill-active',
                        'type': 'fill',
                        'filter': ['all', ['==', 'active', 'true'],
                            ['==', '$type', 'Polygon']
                        ],
                        'paint': {
                            'fill-color': '#e50d0d',
                            'fill-outline-color': '#e50d0d',
                            'fill-opacity': 0.1
                        }
                    },
                    {
                        'id': 'gl-draw-polygon-midpoint',
                        'type': 'circle',
                        'filter': ['all', ['==', '$type', 'Point'],
                            ['==', 'meta', 'midpoint']
                        ],
                        'paint': {
                            'circle-radius': 3,
                            'circle-color': '#e50d0d'
                        }
                    },
                    {
                        'id': 'gl-draw-polygon-stroke-inactive',
                        'type': 'line',
                        'filter': ['all', ['==', 'active', 'false'],
                            ['==', '$type', 'Polygon'],
                            ['!=', 'mode', 'static']
                        ],
                        'layout': {
                            'line-cap': 'round',
                            'line-join': 'round'
                        },
                        'paint': {
                            'line-color': '#3bb2d0',
                            'line-width': 2
                        }
                    },
                    {
                        'id': 'gl-draw-polygon-stroke-active',
                        'type': 'line',
                        'filter': ['all', ['==', 'active', 'true'],
                            ['==', '$type', 'Polygon']
                        ],
                        'layout': {
                            'line-cap': 'round',
                            'line-join': 'round'
                        },
                        'paint': {
                            'line-color': '#e50d0d',
                            'line-dasharray': [0.2, 2],
                            'line-width': 2
                        }
                    },
                    {
                        'id': 'gl-draw-line-inactive',
                        'type': 'line',
                        'filter': ['all', ['==', 'active', 'false'],
                            ['==', '$type', 'LineString'],
                            ['!=', 'mode', 'static']
                        ],
                        'layout': {
                            'line-cap': 'round',
                            'line-join': 'round'
                        },
                        'paint': {
                            'line-color': '#3bb2d0',
                            'line-width': 2
                        }
                    },
                    {
                        'id': 'gl-draw-line-active',
                        'type': 'line',
                        'filter': ['all', ['==', '$type', 'LineString'],
                            ['==', 'active', 'true']
                        ],
                        'layout': {
                            'line-cap': 'round',
                            'line-join': 'round'
                        },
                        'paint': {
                            'line-color': '#e50d0d',
                            'line-dasharray': [0.2, 2],
                            'line-width': 2
                        }
                    },
                    {
                        'id': 'gl-draw-polygon-and-line-vertex-stroke-inactive',
                        'type': 'circle',
                        'filter': ['all', ['==', 'meta', 'vertex'],
                            ['==', '$type', 'Point'],
                            ['!=', 'mode', 'static']
                        ],
                        'paint': {
                            'circle-radius': 5,
                            'circle-color': '#fff'
                        }
                    },
                    {
                        'id': 'gl-draw-polygon-and-line-vertex-inactive',
                        'type': 'circle',
                        'filter': ['all', ['==', 'meta', 'vertex'],
                            ['==', '$type', 'Point'],
                            ['!=', 'mode', 'static']
                        ],
                        'paint': {
                            'circle-radius': 3,
                            'circle-color': '#e50d0d'
                        }
                    },
                    {
                        'id': 'gl-draw-point-point-stroke-inactive',
                        'type': 'circle',
                        'filter': ['all', ['==', 'active', 'false'],
                            ['==', '$type', 'Point'],
                            ['==', 'meta', 'feature'],
                            ['!=', 'mode', 'static']
                        ],
                        'paint': {
                            'circle-radius': 5,
                            'circle-opacity': 1,
                            'circle-color': '#fff'
                        }
                    },
                    {
                        'id': 'gl-draw-point-inactive',
                        'type': 'circle',
                        'filter': ['all', ['==', 'active', 'false'],
                            ['==', '$type', 'Point'],
                            ['==', 'meta', 'feature'],
                            ['!=', 'mode', 'static']
                        ],
                        'paint': {
                            'circle-radius': 3,
                            'circle-color': '#3bb2d0'
                        }
                    },
                    {
                        'id': 'gl-draw-point-stroke-active',
                        'type': 'circle',
                        'filter': ['all', ['==', '$type', 'Point'],
                            ['==', 'active', 'true'],
                            ['!=', 'meta', 'midpoint']
                        ],
                        'paint': {
                            'circle-radius': 7,
                            'circle-color': '#fff'
                        }
                    },
                    {
                        'id': 'gl-draw-point-active',
                        'type': 'circle',
                        'filter': ['all', ['==', '$type', 'Point'],
                            ['!=', 'meta', 'midpoint'],
                            ['==', 'active', 'true']
                        ],
                        'paint': {
                            'circle-radius': 5,
                            'circle-color': '#e50d0d'
                        }
                    },
                    {
                        'id': 'gl-draw-polygon-fill-static',
                        'type': 'fill',
                        'filter': ['all', ['==', 'mode', 'static'],
                            ['==', '$type', 'Polygon']
                        ],
                        'paint': {
                            'fill-color': '#404040',
                            'fill-outline-color': '#404040',
                            'fill-opacity': 0.1
                        }
                    },
                    {
                        'id': 'gl-draw-polygon-stroke-static',
                        'type': 'line',
                        'filter': ['all', ['==', 'mode', 'static'],
                            ['==', '$type', 'Polygon']
                        ],
                        'layout': {
                            'line-cap': 'round',
                            'line-join': 'round'
                        },
                        'paint': {
                            'line-color': '#404040',
                            'line-width': 2
                        }
                    },
                    {
                        'id': 'gl-draw-line-static',
                        'type': 'line',
                        'filter': ['all', ['==', 'mode', 'static'],
                            ['==', '$type', 'LineString']
                        ],
                        'layout': {
                            'line-cap': 'round',
                            'line-join': 'round'
                        },
                        'paint': {
                            'line-color': '#404040',
                            'line-width': 2
                        }
                    },
                    {
                        'id': 'gl-draw-point-static',
                        'type': 'circle',
                        'filter': ['all', ['==', 'mode', 'static'],
                            ['==', '$type', 'Point']
                        ],
                        'paint': {
                            'circle-radius': 5,
                            'circle-color': '#404040'
                        }
                    },

                    // end default themes provided by MB Draw
                    // end default themes provided by MB Draw
                    // end default themes provided by MB Draw
                    // end default themes provided by MB Draw


                    // new styles for toggling colors
                    // new styles for toggling colors
                    // new styles for toggling colors
                    // new styles for toggling colors

                    {
                        'id': 'gl-draw-polygon-color-picker',
                        'type': 'fill',
                        'filter': ['all', ['==', '$type', 'Polygon'],
                            ['has', 'user_portColor']
                        ],
                        'paint': {
                            'fill-color': ['get', 'user_portColor'],
                            'fill-outline-color': ['get', 'user_portColor'],
                            'fill-opacity': 0.5
                        }
                    },
                    {
                        'id': 'gl-draw-line-color-picker',
                        'type': 'line',
                        'filter': ['all', ['==', '$type', 'LineString'],
                            ['has', 'user_portColor']
                        ],
                        'paint': {
                            'line-color': ['get', 'user_portColor'],
                            'line-width': 2
                        }
                    },
                    {
                        'id': 'gl-draw-point-color-picker',
                        'type': 'circle',
                        'filter': ['all', ['==', '$type', 'Point'],
                            ['has', 'user_portColor']
                        ],
                        'paint': {
                            'circle-radius': 3,
                            'circle-color': ['get', 'user_portColor']
                        }
                    },

                ]
            })
            map.addControl(draw.value)

            map.on('draw.create', updateArea);
            map.on('draw.delete', updateArea);
            map.on('draw.update', updateArea);

            map.on('draw.create', function () {
                newDrawFeature = true;
            });
            map.on('draw.update', setDrawFeature);
            map.on('draw.selectionchange', setDrawFeature);
            map.on('click', (e) => {
                if (!newDrawFeature) {
                    let drawFeatureAtPoint = draw.value.getFeatureIdsAt(e.point);

                    //if another drawFeature is not found - reset drawFeatureID
                    drawFeatureID = drawFeatureAtPoint.length ? drawFeatureAtPoint[0] : '';
                }

                newDrawFeature = false;

            });
        };

        return {
            mapOnLoadCB,
            changeColor
        }
    }
}
</script>

<style scoped lang="scss">
.calculation-box {
    height: 150px;
    width: 150px;
    position: absolute;
    bottom: 40px;
    left: 10px;
    background-color: rgba(255, 255, 255, .9);
    padding: 15px;
    text-align: center;
    p {
        margin: 0;
        font-size: 13px;
    }
    #black-color, #red-color, #green-color {
        z-index: 1005;
        position: absolute;
        right: 5px;
        color: white;
    }
    #black-color {
        bottom: 10px;
        background-color: black;
    }
    #red-color {
        bottom: 35px;
        background-color: red;
    }
    #green-color {
        bottom: 60px;
        background-color: green;
    }
}
</style>